<template>
  <a-layout class="group-layout">
    <drawer
      v-if="isMobile"
      :openDrawer="collapsed"
      @change="onDrawerChange"
    >
      <sider-menu
        :theme="theme"
        :menuList="menuData"
        :collapsed="false"
        :collapsible="false"
        @menuSelect="onMenuSelect"
      />
    </drawer>
    <sider-menu
      :theme="theme"
      v-else-if="layout === 'side'"
      :menuData="menuData"
      :collapsed="collapsed"
      :collapsible="true"
    />
    <drawer
      :open-drawer="showSetting"
      placement="right"
      @change="onSettingDrawerChange"
    >
      <div
        class="setting"
        slot="handler"
      >
        <a-icon :type="showSetting ? 'close' : 'setting'" />
      </div>
      <setting />
    </drawer>
    <a-layout>
      <global-header
        :menuData="menuData"
        :collapsed="collapsed"
        class="global-layout-header"
        :style="{ height: headerHeight }"
        @toggleCollapse="toggleCollapse"
      />
      <a-layout-content
        class="global-layout-content"
        :style="{margin: '0px 0 0', paddingTop: fixedHeader ? headerHeight : '0'}"
      >
        <router-view />
      </a-layout-content>

      <!-- 帮助中心 start -->
      <a-modal
        :visible="helperVisible"
        title="帮助文档"
        centered
        width="80%"
        @cancel="helperVisible = false"
        :footer="null"
      >
        <section class="global-helper">
          <Helper :currentId="currentMenu.id" />
        </section>
      </a-modal>
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>帮助</span>
        </template>
        <a-button class="global-helper-button" size="large" icon="question" type="primary" shape="circle" @click="handlerHelper"></a-button>
      </a-tooltip>
     
      <!-- 帮助中心 end -->

      <!-- <a-modal
        :visible="videoVisible"
        title="平台使用相关视频"
        centered
        width="80%"
        @cancel="videoVisible = false"
        :footer="null"
      >
        <section class="global-helper">
          <VideoDetail :currentId="currentMenu.id" />
        </section>
      </a-modal>
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>视频</span>
        </template>
        <a-button class="global-helper-button help-video" size="large" icon="play-circle" type="primary" shape="circle" @click="videoVisible = true"></a-button>
      </a-tooltip> -->
      
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { State, Mutation, namespace } from 'vuex-class'
import GlobalHeader from './GlobalHeader.vue'
import Drawer from '@/components/src/tool/Drawer.vue'
import SiderMenu from '@/components/src/menu/SiderMenu.vue'
import Setting from '@/components/src/setting/Setting.vue'

import { permission } from '@/store/modules/permission'
import { settingModule } from '@/store/modules/setting'
import { userModule } from '@/store/modules/user'

import event from '@/utils/events'
import Helper from '@/views/help/document/DocumentDetail.vue'
// import VideoDetail from '@/views/help/video/VideoDetail.vue'
import { appModule } from '@/store/modules/app'
import events from '@/utils/events'

const minHeight: number = window.innerHeight - 64 - 24 - 122

@Component({
  components: { Setting, SiderMenu, Drawer, GlobalHeader, Helper }
})
export default class GlobalLayout extends Vue {

  public helperVisible = false
  public videoVisible = false

  public minHeight: string = minHeight + 'px'
  public collapsed: boolean = false
  public showSetting: boolean = false
  public $router: any

  public headerHeight = '64px';

  get user() {
    return userModule
  }

  get currentMenu() {
    return appModule.currentMenu
  }

  get menuData() {
    return permission.filteredMenu
  }

  get isMobile() {
    return settingModule.isMobile
  }
  get theme() {
    return settingModule.theme
  }
  get layout() {
    return settingModule.layout
  }

  get fixedHeader() {
    return settingModule.fixedHeader
  }

  public mounted() {
    // permission.getPermissionList()
    event.listen('show-helper', () => {
      this.helperVisible = true
    })
    this.$on('hook:destroyed', () => {
      event.remove('show-helper')
    })
  }

  public toggleCollapse() {
    this.collapsed = !this.collapsed
  }
  public onDrawerChange(show: boolean) {
    this.collapsed = show
  }
  public onMenuSelect() {
    this.toggleCollapse()
  }
  public onSettingDrawerChange(val: boolean) {
    this.showSetting = val
  }

  public handlerHelper() {
    events.trigger('show-helper')
  }
}
</script>

<style lang="less" scoped>
.group-layout {
  height: 100%;
}
.setting {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px 0 0 5px;
  line-height: 40px;
  font-size: 22px;
  width: 40px;
  height: 40px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}
.global-layout-header {
}
.global-layout-content {
}
.global-helper {
  height: 80vh;
  overflow: scroll;
}
.global-helper-button {
  position: absolute;
  top: 100px;
  right: 0px;
}
.help-video {
  top: 230px;
}
</style>
